<template>
  <div class="login-setting">
    <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="120px"
      style="margin-left: 120px; margin-top: 30px">
      <el-form-item label="姓名:" prop="username">
        <el-input v-model="userInfo.username" style="width:300px" />
      </el-form-item>

      <el-form-item label="密码:" prop="password">
        <el-input v-model="userInfo.password" type="password" style="width:300px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateUser">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getEmployeeInfoAPI, saveEmployeByIdAPI } from '@/api'
  export default {
    name: 'LoginSetting',
    data () {
      return {
        userInfo: {
          username: '',
          password: ''
        },
        rules: {
          username: [{ required: true, message: '用户名不能为空', triggler: 'blur' }],
          password: [{ required: true, message: '密码不能为空', triggler: 'blur' },
          { min: 6, max: 12, message: '密码长度在6-24位', triggler: 'blur' }
          ]
        }
      }
    },
    created () {
      this.getemployes()
    },
    methods: {
      async getemployes () {
        const id = this.$route.params.id
        const res = await getEmployeeInfoAPI(id)
        if (res.success) return this.$message.error(res.message)
        this.userInfo = res
        this.userInfo.password = ''
      },
      async updateUser () {
        this.$refs.userForm.validate()
        try {
          await saveEmployeByIdAPI(this.userInfo)
          this.getemployes()
          this.$message.success('更新成功')
        } catch { }
      }
    },
  }
</script>

<style lang="scss" scoped></style>